<template>
    <div class="icons">
        <div class="icon">
            <div class="icon-img">
                 <img class="icon-img-content" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20215/bdbdf2d8bbc533595440c74c7bd22af4.png" >
            </div>
            <p class="icon-desc">热门景点</p>
        </div> 
        <div class="icon">
            <div class="icon-img">
                 <img class="icon-img-content" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/cd9c5d035aa48862c3695becc06764e6.png" >
            </div>
            <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
            <div class="icon-img">
                 <img class="icon-img-content" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/feac0f0a895cbc7c49920238529ca6e7.png" >
            </div>
            <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
            <div class="icon-img">
                 <img class="icon-img-content" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/5ffcd4a916f764f678263b27c1e2e00c.png" >
            </div>
            <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
            <div class="icon-img">
                 <img class="icon-img-content" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/5ffcd4a916f764f678263b27c1e2e00c.png" >
            </div>
            <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
            <div class="icon-img">
                 <img class="icon-img-content" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/feac0f0a895cbc7c49920238529ca6e7.png" >
            </div>
            <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
            <div class="icon-img">
                 <img class="icon-img-content" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20215/bdbdf2d8bbc533595440c74c7bd22af4.png" >
            </div>
            <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
            <div class="icon-img">
                 <img class="icon-img-content" src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20209/cd9c5d035aa48862c3695becc06764e6.png" >
            </div>
            <p class="icon-desc">热门景点</p>
        </div>
    </div>
</template>
<script>
export default {
    name:'HomeIcons'
}
</script>
<style lang="stylus" scoped>
    .icons
       overflow hidden
       width 100%
       height 0
       padding-bottom 50%
    //    background green
       .icon
          margin-top .2rem
          position relative
          overflow hidden
          height 0
          float left
          width 25%
          padding-bottom 25%
        //   background gray
          .icon-img
             position absolute
             top 0
             left 0
             right 0
             bottom .44rem
             box-sizing border-box
             padding .1rem
            //  background pink
             .icon-img-content
                display block
                margin 0 auto
                height 100%
          .icon-desc
             position absolute
             left 0
             right 0
             bottom 0
             height .44rem
             line-height .44rem
            //  color #333              
</style>
